<template>
  <div>
    <el-dialog
      :width="width"
      :class="className"
      v-if="visible"
      :center="true"
      :close-on-click-modal="false"
      :title="title"
      :before-close="closeDialog"
      :visible.sync="visible"
    >
      <slot></slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    Width: {
      type: [String, Number],
      default: '50%'
    },
    Title: {
      type: String,
      default: ''
    },
    Visible: {
      type: Boolean,
      requied: true
    },
    ClassName: {
      type: String
    }
  },
  data() {
    return {
      title: this.Title,
      visible: this.Visible,
      width: this.Width,
      className: this.ClassName
    }
  },
  mounted() {},
  methods: {
    closeDialog(done) {
      done()
      this.$emit('done')
    }
  },
  watch: {
    Visible() {
      return (this.visible = this.Visible)
    },
    Title() {
      return (this.title = this.Title)
    },
    ClassName() {
      return (this.className = this.ClassName)
    },
    Width() {
      return (this.width = this.Width)
    }
  }
}
</script>
<style lang="less" scoped></style>
